<html>
    
 <head>
    <title>HTML 文档结构</title>
 </head>

 <body>
    <div class="group">
        <!--输入框-->
        <input type="text" class="todovalue" name="todovaluename"  id="todovalueId" placeholder="请输入TODO内容"
            onkeydown="valueChange(event)" />
        <input type="button" value="BUTTON2" onclick="handleclick()"></input>
        <input type="button" value="BUTTON3" >Button3</input>
        
        <!--遍历数据-->
    <div id="todolist">
        <div class="item" id="item0"> 
            <imput class="item-chk" type="checkbox"/>
            <div class="item-sp">吃饭0</div>
            <imput id="item-del-0" class="item-del" type="button" value ="删除" onclick="handledelclick(0)"></imput>
        </div>
        <div class="item" id="item1">
            <imput class="item-chk" type="checkbox"/>
            <div class="item-sp">吃饭1</div>
            <imput id="item-del-1" class="item-del" type="button" value="删除" onclick="handledelclick(1)"></imput>
        </div>
        <div class="item" id="item2"> 
            <imput class="item-chk" type="checkbox"/>
            <div class="item-sp">吃饭2</div>
            <imput id="item-del-2" class="item-del" type="button" value ="删除" onclick="handledelclick(2)"></imput>
        </div>

        <div class="item" id="item3">
            <imput class="item-chk" type="checkbox"/>
            <div class="item-sp">吃饭3</div>
            <imput id="item-del-0" class="item-del" type="button" value="删除" onclick="handledelclick(3)">  
        </div>
    </div>
    <!--操作的footer-->
</div>   
</body>
<script lang="javascript">
    var index = 0;
    function init(){
        document.getElementById("button3").onclick=handleclick;
        //document.getelementbyid("imput").addeventlistener('keyup',function(event)){
        //    if (event.keycode == 13){
        //        var v = document.getElementById("todovalueId").value;
        //        console.log(v);
        //         //这里写事件，例如写个 a（）；
        //    }
        // )}
        // document.getelementbyid("imput").onkeydown = valuechange;
    }
    function valuechange(e) {
        console.log(e);
        if(event.keycode == 13){
            handleclick();
        }
    }

    function handleclick (){
       var temp=document.getElementsByName("todovaluename")[0].value;
       // alert("我被按了" + temp)；
       // var t =document.getelementbyid("todolist").innerHTML;
       // document.getelementbyid("todolist").innerHTML = t + "<div>" + temp + "</div>";
       var div = document.createElement("div");
       div.innerText = temp
       // document.getElementbyid("todolist").innerHTML += div;
       document.getElementById("todolist").append(div);
    }  

    function test1(index){
       // console.log("test12111")
       // document.getElementById("todoloist").children[index].style="background-clor:red";
       // document.getElementById("item-del-"+index).style ="opacity: 1;";
    }

    function test1(index){
       // console.log("22222222")
       // document.getElementById("todoloist").children[index].style="background-clor:red";
       // document.getElementById("item-del-"+index).style ="opacity: 0;";
    }

    function handledelclick(index){
        var arr = document.getElementById("todolist");
        console.log(arr);
        document.getElementById("item" + index).remove();

        // document.getElementById("todolist").removechild(arr.childnodes[index]);
    }

    init();
    // alert("test");
</Script>
<style>
    body{
        display: flex;
        justify-content:center ;
        align-items: center;
        min-height:100vh;
    }
    .group{
        border: 1px solid blue;
        padding: 10px ;
        
        border-radius: 4px;

    }
/* sass less */
  
    .item{
        /*display: none;*/
        /*opacity: 0;*/
        /*background-color: rgba(red,green,blue,alpha);*/
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }


    .item:hover{
        background-color: aque;

        transform: scale(1.2);
    }

    .item-sp{
    flex-grow: 1;
    }

    .item-del{
         background-color:red;
         border: 0px;
         color: aliceblue;

         opacity: 0;
    }

   .item:hover .item-del{
        opacity: 1;
    }

    .todovalue{
        border: 2px solid #333333;
        padding: 6px;
        outline: none;

    }

    .todovalue:focus{
        box-shadow: 0px 0px 9px #4086cd;
        border:2px solid #4086cd;
        outline: none;

    }

</style>

</html>